
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 echarts.js -->
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link rel="stylesheet" href="../../../../resources/css/login.css">
    <script src="../../../../resources/jquery/jquery.js"></script>
    <script src="../../../../resources/js/vue.js"></script>
    <script src="../../../../resources/plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../../../../resources/plugins/elementui/index.css">
    <link rel="stylesheet" href="../../../../resources/css/page-health-login.css" />
    <link rel="stylesheet" href="../../../../resources/plugins2/elementui/index.css" />
    <script src="../../../../resources/plugins2/jquery/dist/jquery.min.js"></script>
    <script src="../../../../resources/plugins2/healthmobile.js"></script>
    <script src="../../../../resources/plugins2/vue/vue.js"></script>
    <script src="../../../../resources/plugins2/vue/axios-0.18.0.js"></script>
    <script src="../../../../resources/plugins2/elementui/index.js"></script>
</head>
<body>
    <div id = "app">
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                @expand-change="getNew"
                row-key="id"
        >
            <el-table-column type="expand">
                <template v-slot="{row}">
                    <el-table
                            border
                            :data="row.children"
                            v-loading="row.loading"
                    >
                        <el-table-column prop="date" label="时间" width="180" />
                        <el-table-column prop="username" label="姓名" width="180" />
                        <el-table-column prop="address" label="住址" width="180" />
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="gender" label="性别" width="180" />
        </el-table>
    </div>

</body>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            // 一级表格的数据
            tableData:[
                {
                    id: "1",
                    name: "张三",
                    age: 18,
                    gender: "男",
                },
                {
                    id: "2",
                    name: "李四",
                    age: 19,
                    gender: "男",
                },
                {
                    id: "3",
                    name: "王五",
                    age: 20,
                    gender: "男",
                },
                {
                    id: "4",
                    name: "男子",
                    age: 21,
                    gender: "男",
                }],
            // 模拟二级表格的数据，这里的数据再真实环境中是通过当前展开一级表格行的数据 发请求获得的
            children1:[
                {
                    id: '5',
                    address: '翻斗花园21号',
                    date: "2016-05-01",
                    username: "wangxiaohu",
                }
            ],
        },
        created(){

        },
        methods: {
            getNew(row, expanded) {
                console.log(row, expanded) // 当前行 当前已展开行
                // 判断让当前行展开
                if (JSON.stringify(expanded).includes(JSON.stringify(row)) === true) {
                    this.$set(row, 'loading', true)  // 表格加载开
                    this.tableData.forEach(item => {
                        // 找到当前展开的行，把获取到的数据赋值进去
                        if (item.id === row.id) {
                            console.log('id', item.id, row.id) // 可能打印四种 11 22 33 44
                            item.children = this.children1 || []
                        }
                    })
                    // 用定时器模拟发请求的延时过程
                    setTimeout(() => {
                        this.$set(row, 'loading', false) // 表格加载关
                    }, 500)
                } else { // 让当前行关闭
                    delete row.children // 删除当前关闭行的 children
                    this.$set(row, 'loading', false) // 表格加载关
                    delete row.loading // 删除当前关闭行的 loading
                }
            },
        }
    });
</script>

</html>